<template>
	<view class="table_header">
		<view class="" style="display: flex;">
			<view class="table" v-for="(item, index) in theader" :key="index">
				<view class="th" >{{item.name}}</view>
			</view>
		</view>
		<view class="table_body" style="">
			<view class="table" style="display: flex;height: 70rpx;background-color: ;" v-for="(item,index) in tableData" :key="index">
				<view :class="'marl'" style="border: 2rpx solid #4E84F24D;height: 66rpx;" @click="storey(item)">
					<view class="" style="width: 152rpx;">{{item[0].storeyNum}}</view>
				</view>
				<view  style="border: 2rpx solid #4E84F24D;height: 66rpx;" v-for="(v,i) in item" :key="i" v-if="v.roomWidth" @click="hourse(v)">
						<view :class="v.isRemove ? 'remove' : ''" :style="'width:'+ (v.roomWidth - (2*(v.roomWidth / 130 + 1))) + 'rpx; '">{{v.isRemove ? '' : v.people}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 删除，合并等接口
	// import { storeyDel, storeyEnable, storeySplit, storeyMerge } from '@/api/unit/budling.js'
	export default{
		props:{
			theader:{
				type: Array,
				default: ()=>[
					{name: "权益类型", prop: "1"},
					{name: "白银权益卡", prop: "1"},
					{name: "黄金权益卡", prop: "1"},
					{name: "铂金权益卡", prop: "1"}
				]
			},
			tableData:{
				type:Array,
				default: ()=> {return [
					[
						// isMerger 是否合并(1为合并)，isRemove是否删除(1删除) people人数， room房间号， roomwidth表格宽度，基础为130，select是否被选中，storeyNum楼层号， mergerId合并id(需要合并的表格)
						{id: "1651769875267837953", isMerger: 0, isRemove: 0, mergerId: "", people: 2,room: 1, roomWidth: 130, select: false,storeyNum: 4},
						{id: "1651769875267837954", isMerger: 1, isRemove: 0, mergerId: "1651769875267837954", people: 5,room: 2, roomWidth: 0, select: false,storeyNum: 4},
						{id: "1651769875267837955", isMerger: 1, isRemove: 0, mergerId: "1651769875267837954", people: 5,room: 3, roomWidth: 260, select: false,storeyNum: 4},
						{id: "1651769875267837956", isMerger: 0, isRemove: 0, mergerId: "", people: 2,room: 4, roomWidth: 130, select: false,storeyNum: 4},
					],
					[
						{id: "1651769875267837957", isMerger: 0, isRemove: 0, mergerId: "", people: 2,room: 1, roomWidth: 130, select: false,storeyNum: 3},
						{id: "1651769875267837958", isMerger: 0, isRemove: 0, mergerId: "", people: 5,room: 2, roomWidth: 130, select: false,storeyNum: 3},
						{id: "1651769875267837959", isMerger: 1, isRemove: 0, mergerId: "1651769875267837959", people: 5,room: 3, roomWidth: 0, select: false,storeyNum: 3},
						{id: "1651769875267837960", isMerger: 1, isRemove: 0, mergerId: "1651769875267837959", people: 2,room: 4, roomWidth: 260, select: false,storeyNum: 3},
					],
					[
						{id: "1651769875267837961", isMerger: 0, isRemove: 0, mergerId: "", people: 2,room: 1, roomWidth: 130, select: false,storeyNum: 2},
						{id: "1651769875267837962", isMerger: 0, isRemove: 0, mergerId: "", people: 5,room: 2, roomWidth: 130, select: false,storeyNum: 2},
						{id: "1651769875267837963", isMerger: 0, isRemove: 0, mergerId: "", people: 5,room: 3, roomWidth: 130, select: false,storeyNum: 2},
						{id: "1651769875267837964", isMerger: 0, isRemove: 0, mergerId: "", people: 2,room: 4, roomWidth: 130, select: false,storeyNum: 2},
					],
					[
						{id: "1651769875267837965", isMerger: 0, isRemove: 0, mergerId: "", people: 2,room: 1, roomWidth: 130, select: false,storeyNum: 1},
						{id: "1651769875267837966", isMerger: 0, isRemove: 0, mergerId: "", people: 5,room: 2, roomWidth: 130, select: false,storeyNum: 1},
						{id: "1651769875267837967", isMerger: 0, isRemove: 0, mergerId: "", people: 5,room: 3, roomWidth: 130, select: false,storeyNum: 1},
						{id: "1651769875267837968", isMerger: 0, isRemove: 0, mergerId: "", people: 2,room: 4, roomWidth: 130, select: false,storeyNum: 1},
					],
				]}
			},
			ids:{
				type: String,
				default: ''
			},
			housingId:{
				type: String,
				default: ''
			},
		},
		data(){
			return{
				storeyData: {},
			}
		},
		methods:{
			/** 
			 * @param {Object} item
			 * 楼层
			 */
			storey(item){
				this.storeyData = item
				this.storeyData.forEach((v,i) => {
					this.$set(this.storeyData[i], 'select', false)
				})
				this.$refs.popup.open()
			},
			/** 
			 * @param {Object} item
			 * 房间
			 */
			hourse(item){
				if(item.isRemove){
					uni.showToast({
						icon: 'none',
						title: '该房间已被删除'
					})
					return
				}
				console.log('点击了房间');
			},
			select(i){
				this.storeyData[i].select = !this.storeyData[i].select
			},
			/**
			 * 合并
			 */
			merge(){
				const ids = []
				this.storeyData.forEach(item => {
					if(item.select){
						ids.push(item.id)
					}
				})
				storeyMerge({ids}).then(res => {
					if(res.code === 200){
						this.$refs.popup.close()
						this.$parent.getstoreyList()
					}else{
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			/**
			 * 拆解
			 */
			takeApart(){
				let ids = ''
				let cont = 0
				this.storeyData.forEach(item => {
					if(item.select){
						cont += 1
						ids = item
					}
				})
				if(ids.isMerger && cont === 1){
					storeySplit(ids.id).then(res => {
						if(res.code === 200){
							this.$parent.getstoreyList()
							this.$refs.popup.close()
						}else{
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
				}else{
					uni.showToast({
						icon: 'none',
						title: '请选择一个房间或被合并的房间'
					})
				}
			},
			/**
			 删除
			 */
			del(){
				let ids = ''
				let cont = 0
				this.storeyData.forEach(item => {
					if(item.select){
						cont += 1
						ids = item
					}
				})
				if(!ids.isRemove && cont === 1){
					storeyDel(ids.id).then(res => {
						if(res.code === 200){
							this.$parent.getstoreyList()
							this.$refs.popup.close()
						}else{
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
				}else{
					uni.showToast({
						icon: 'none',
						title: '请选择一个房间或被删除的房间'
					})
				}
			},
			/**
			 * 启用
			 */
			enable(){
				let ids = ''
				let cont = 0
				this.storeyData.forEach(item => {
					if(item.select){
						cont += 1
						ids = item
					}
				})
				if(ids.isRemove && cont === 1){
					storeyEnable(ids.id).then(res => {
						if(res.code === 200){
							this.$parent.getstoreyList()
							this.$refs.popup.close()
						}else{
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
				}else{
					uni.showToast({
						icon: 'none',
						title: '请选择一个房间或启用的房间'
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
		
	.table_header{
		background: rgba(22,155,213,0.8);
		width: 100%;
		min-width: 670rpx;
		overflow-x: scroll;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		.table{
			display:table;
			width: 100%;
			display: flex;
		}
		.flex{
			display: flex;
			flex-direction: column;
			width: 152rpx !important;
			/*模拟对角线*/
			/*让里面的两个子容器绝对定位*/
			.roomNumber{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				width: 100%;
				margin-right: 10rpx;
			}
			.name{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				width: 100%;
				margin-left: 10rpx;
			}
			position: relative;
		}
		.flex:after{     
			content:"";
			display: inline-block;
			position: absolute;
			top:35rpx;
			left: 0px;
			width: 152rpx !important;
			height: 2rpx;
			background-color: #fff;
			transform: rotate(23deg) scale(1.1);
		}
		.th{
			display: table-cell;
			height: 70rpx;
			font-size: 28rpx;
			color: #fff;
			border: 2rpx solid rgba(78,132,242,0.3);
			display: flex;
			justify-content: center;
			align-items: center;
			// width: 126rpx;
		}
	}
	.table_body{
		width: 100%;
		.table{
			display:table;
			width: 100%;
			view{
				height: 66rpx;
			}
		}
		.table:nth-child(odd){
			view{
				background-color: #F3F6FF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.table:nth-child(even){
			view{
				background-color: #f8f8f8;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.marl{
		margin-left: 0;
		width: 25%;
	}

::v-deep .vue-ref{
	padding-bottom: 0 !important;
}
.popup{
	padding: 26rpx 42rpx 68rpx 42rpx;
	width: calc(100% - 84rpx);
	height: 100%;
	background-color: #fff;
	.popup_title{
		height: 50rpx;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 50rpx;
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.popup_content{
		margin-top: 22rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
		line-height: 50rpx;
		text-align: center;
	}
	.wiseUp{
		width: 100%;
		height: 80rpx;
		background-color: #4E84F2;
		color: #fff;
		border: 0;
		font-size: 32rpx;
		margin-top: 30rpx;
	}
}
.remove{
	background-color: #FF6867FF !important;
}
.button{
	width: 108rpx;
	height: 44rpx;
	border-radius: 44rpx;
	font-size: 28rpx;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 20rpx 10rpx;
}
.check{
	background-color: #EDF2FC;
}
</style>